<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import type { DarkModeSettings } from '@/core/darkMode';

const settings = ref<DarkModeSettings>({
  brightness: 100,
  contrast: 100,
  sepia: 0,
  enabled: true
});

function updateSettings() {
  browser.storage.sync.set({ darkModeSettings: settings.value });
  console.log('Popup sending updateDarkMode message:', settings.value);
  browser.runtime.sendMessage({
    type: 'updateDarkMode',
    settings: settings.value
  });
  // browser.tabs.query({ active: true, currentWindow: true }).then((tabs) => {
  //   if (tabs[0]?.id) {
  //     console.log('更新设置', settings.value, tabs[0].id);
  //     browser.tabs.sendMessage(tabs[0].id, {
  //       type: 'updateDarkMode',
  //       settings: settings.value
  //     });
  //   }
  // });
}

onMounted(() => {
  browser.storage.sync.get('darkModeSettings').then((result) => {
    if (result.darkModeSettings) {
      settings.value = result.darkModeSettings;
    }
  });
});
</script>

<template>
  <div class="container">
    <h1>Dark Reader</h1>
    <div class="control">
      <label>
        <input type="checkbox" v-model="settings.enabled" @change="updateSettings">
        启用暗色模式
      </label>
    </div>
    <div class="control">
      <label>亮度: {{ settings.brightness }}%</label>
      <input type="range" v-model="settings.brightness" min="0" max="200" @input="updateSettings">
    </div>
    <div class="control">
      <label>对比度: {{ settings.contrast }}%</label>
      <input type="range" v-model="settings.contrast" min="0" max="200" @input="updateSettings">
    </div>
    <div class="control">
      <label>棕褐色: {{ settings.sepia }}%</label>
      <input type="range" v-model="settings.sepia" min="0" max="100" @input="updateSettings">
    </div>
  </div>
</template>

<style scoped>
.container {
  width: 300px;
  padding: 20px;
}
.control {
  margin-bottom: 15px;
}
</style>